import React from 'react'
import PropTypes from 'prop-types'
import ListItem2 from '@mui/material/ListItem';
import Divider from '@mui/material/Divider';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
import Chip from '@mui/material/Chip';
import style from './index.module.scss';
import Star from '@mui/icons-material/Star';
ListItem.propTypes = {
    _id:  PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    tag: PropTypes.array.isRequired,
    price: PropTypes.number.isRequired,
    methods: PropTypes.string.isRequired,
    publicNickName: PropTypes.string.isRequired,
    publicInfo: PropTypes.string.isRequired,
    detail: PropTypes.string.isRequired,
    userClick: PropTypes.func.isRequired,
    text: PropTypes.string,
    isShowButton: PropTypes.bool
}
ListItem.defaultProps = {
    text: '立即报名',
    isShowButton: true
}


export default function ListItem(props) {
    const { _id, title, tag, price, methods, publicNickName, publicInfo, detail, userClick, text, isShowButton} = props;

    // 渲染文章区域
    const renderText = () => {
        return (
            <div className={style.box_add}>
                    {text}
                </div> 
        )
    }
    // 渲染点赞
    const renderStar = () => {
        return (
            <div className={style.box_star}>
                <Star style={{color: '#f7ae3d'}}  sx={{ fontSize: 24}} />
            </div>
        )
    }
    return (
        <>     
            <ListItem2 onClick={() => userClick(props)} alignItems="flex-start" className={style.box}>
                <ListItemAvatar>
                    <Avatar alt="用户" src={publicInfo} />
                </ListItemAvatar>
                <ListItemText
                primary={title}
                secondary={
                    <React.Fragment>
                        <div style={{marginTop: '10px'}}>
                        {tag.map((item) => {
                                return (
                                    <Chip
                                    size="small"
                                    label={item.name}
                                    variant="outlined"
                                    style={{marginRight: '5px'}}
                                />
                            )
                        })}
                        </div>
                    </React.Fragment>
                }
                />
                <div className={style.price}>
                    <div className={style.price2}>{price + '元'}</div>
                    <div className={style.price3}>{'/' + methods}</div>
                </div>
                {isShowButton ? renderText() : renderStar()}
            </ListItem2>
            <Divider variant="inset" component="li" />
        </>
    )
}

